<template>
  <page class="system">
    <page-header>
      <x-header :left-options="{backText: ''}">公告消息</x-header>
    </page-header>
    <page-content class="inner" :scroll="true" @refresh="refresh" @infinite="infinite">
      <loading v-if="empty" :loading="loading" :empty="empty"></loading>
      <div v-else>
        <card class="success" v-for="item in notify" :key="item.id" @click.native="handleCardClick(item)">
          <card-header>
            <span slot="title">{{item.title}}</span>
            <span slot="text">{{item.apiStatus}}</span>
          </card-header>
          <card-content>
            <div class="grid">
              <div class="grid-item h-full">
                <label class="label">公告类型</label>
                <p class="vlaue">{{item.apiType}}</p>
              </div>
              <div class="grid-item h-full">
                <label class="label">发布时间</label>
                <p class="vlaue">{{item.createDate}}</p>
              </div>
              <div class="grid-item h-full">
                <label class="label">公告内容</label>
                <p class="vlaue">{{item.content}}</p>
              </div>
            </div>
          </card-content>
        </card>
      </div>
    </page-content>
  </page>
</template>

<script>
import { mapGetters } from 'vuex'
import { oaNotify } from '@service'
import { XHeader } from 'vux'
export default {
  name: 'Notify',
  components: {
    XHeader
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/info',
      token: 'user/token'
    }),
    empty () {
      return this.notify.length === 0
    }
  },
  data () {
    return {
      notify: [],
      page: {
        pageNo: 1,
        pageSize: 10
      },
      loading: false
    }
  },
  methods: {
    async loadData () {
      let token = this.token
      let userId = this.userInfo.id
      let page = this.page
      let notifyData
      try {
        this.loading = true
        notifyData = await oaNotify.list({userId, token, ...page})
        this.notify = notifyData.list || []
        this.loading = false
      } catch (error) {
        console.log(error)
        this.loading = false
      }
    },
    refresh () {
      this.page.pageNo = 1
      this.loadData()
    },
    infinite () {
      this.page.pageNo += 1
      this.loadData()
    },
    handleCardClick (item) {
      this.$router.push('/notify/' + item.id)
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style lang="scss">
  .system {
    .card .card-content .grid .grid-item .label {
      width: 4.5rem;
    }

    .card .card-content .grid .grid-item.h-full .vlaue{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
</style>
